import React from 'react'
import style from "./index.module.scss"
import { Table } from 'antd';
import type { TableProps } from 'antd';
import { getAssetPath } from '@/utils';
type Props = {
    title: string
    columns?: TableProps['columns']
    dataSource?: any[]
    rowKey?: string
    className?: string
    children?: React.ReactNode
    tableOptions?: Omit<TableProps, 'columns' | "dataSource">
}

const PanelList: React.FC<Props> = (props) => {
    const { title = "请自定义标题", columns, dataSource, rowKey = "id", className, children, tableOptions } = props
    function renderEle() {
        if (children) {
            return children
        }
        let srcUrl: string
        if (title === "top5") {
            srcUrl = getAssetPath("top5.png")
        } else {
            srcUrl = getAssetPath("top3.png")
        }
        return (
            <div className='table-box px-[15px]'>
                <img src={srcUrl} alt="" className='w-[65%]' />
                <Table size="small" columns={columns} pagination={false} dataSource={dataSource} rowKey={rowKey} {...tableOptions} />
            </div>
        )
    }
    return (
        <div className={`${style["panel-list"]} panel-list flex flex-col${className ? " " + className : ""}`}>
            {!title.includes("top") && <div className={`${style.title} panel-list-title w-[60%] h-6 indent-10 tracking-[3px] italic font-bold text-[14px]`}>
                {title}
            </div>}
            {renderEle()}
        </div>
    )
}

export default PanelList